<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="wechat"/>
    <title></title>
    <title>账号注册</title>
</head>

<body>

<div class="wxRegister">
    <form action="wxCreate3Step3" id="registerForm" method="post">
        <g:textField class="weui-input hide" type="text" name="openId" value="${params.openId}"></g:textField>
        <g:textField class="weui-input hide" type="text" name="leadsId" value="${params.leadsId}"></g:textField>
        <g:textField class="weui-input hide" type="text" name="requestedAmount" value="${params.requestedAmount}"></g:textField>
        <div class="bgcWhite weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label
                        class="weui-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label></div>

                <div class="weui-cell__bd weui-cell_primary">
                    <g:textField class="weui-input" type="text" name="fullName" id="fullName"
                                 value="${this.contact.fullName}" autofocus="autofocus"/>
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手&nbsp;&nbsp;机&nbsp;&nbsp;号</label></div>

                <div class="weui-cell__bd weui-cell_primary">
                    <g:field class="weui-input" type="number" name="cellphone" id="cellphone"
                             value="${this.contact.cellphone}" />
                </div>


            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">验&nbsp;&nbsp;证&nbsp;&nbsp;码</label></div>

                <div class="weui-cell__bd weui-cell_primary">
                    <g:field class="weui-input" type="number" placeholder="请输入手机收到的验证码" name="verifiedCode"
                             id="verifiedCode" />
                </div>
                <div class="weui-cell_ft">
                    <input id="btnSendVerifiedCode" type="button"
                           class="vCode-btn weui-btn weui-btn_mini weui-btn_plain_default" value="发送验证码"/>
                </div>
            </div>

        </div>


        <div class="bigBtn">
            <button type="button" class="linkBtn weui-btn" id="submitBtn">提交</button>
        </div>
    </form>

</div>


%{--提示信息和验证--}%
<div class="message-box">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>
    <div class="row">
        <g:hasErrors bean="${this.contact}">
            <ul class="errors" role="alert">
                <g:eachError bean="${this.contact}" var="error">
                    <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message
                            error="${error}"/></li>
                </g:eachError>
            </ul>
        </g:hasErrors>
    </div>
</div>

<g:javascript>
    $(function () {

        var time = 30;
        var interval;
        $('#btnSendVerifiedCode').click(function () {
            if (!$("#cellphone").val().trim()) {
                $(".helpMsg").text("请输入手机号").fadeIn(200);
                $('#btnSendVerifiedCode').addClass("vCodeActive").attr('disabled', 'disabled');
                setTimeout(function () {
                    $(".helpMsg").fadeOut(200);
                    $('#btnSendVerifiedCode').removeClass("vCodeActive").removeAttr('disabled');
                }, 2000);
                return;
            }

            if (/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test($("#cellphone").val())) {
                $.ajax({
                    type: "POST",
                    url: "/contact/sendVerifiedCode",
                    data: {
                        cellphone: $("#cellphone").val(),
                        operation: "register"
                    },
                     beforeSend:function(){
                        interval = setInterval(function () {
                                if (time > 0) {
                                    $('#btnSendVerifiedCode').attr('disabled', 'disabled').addClass("vCodeActive");
                                    $('#btnSendVerifiedCode').val("" + (time--) + '秒后重试');
                                } else {
                                    $('#btnSendVerifiedCode').removeAttr('disabled').removeClass("vCodeActive");
                                    $('#btnSendVerifiedCode').val("获取验证码");
                                    time = 60;
                                    clearInterval(interval);
                                }
                            }, 1000);

                    },
                    success: function (data) {
                        if (data.status == "success") {
                            helpMessage("验证码发送成功");
                        }
                        if (data.status == "error") {
                            helpMessage(data.errorMessage);
                        }
                    },
                });
            } else {
                $('#cellphone').val('');
                helpMessage("请输入正确的手机号");
            }
        });
        setTimeout(function () {
            $(".message").fadeOut(200);
        }, 2000);

        // 参数合法性校验
        $("#submitBtn").click(function () {
            var fullNameStr = $("#fullName").val().trim();
            var cellphoneStr = $("#cellphone").val().trim();
            var verifiedCodeStr = $("#verifiedCode").val().trim();

            if (!fullNameStr) {
                helpMessage("请输入姓名");
                return;
            }
            if (!(/^[\u2190-\u9fff]{1,10}$|^[\dA-Za-z]{1,20}$/.test(fullNameStr))) {
                helpMessage("姓名格式不正确");
                return;
            }
            if (!cellphoneStr) {
                helpMessage("请输入手机号");
                return;
            }
            if (!(/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(cellphoneStr))) {
                helpMessage("请输入正确的手机号");
                return;
            }
            if (!verifiedCodeStr) {
                helpMessage("请输入验证码");
                return;
            }

            $("#registerForm").submit();
        });

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }
    });
</g:javascript>

</body>
</html>
